<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/plus.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconfonts/iconfont.css">
    <link rel="stylesheet" href="./css/oa.css">
</head>

<body>
    <!-- 头部区域开始 -->
    <div id="header">
        <div class="header-con">
            <!-- 左侧导航 -->
            <ul class="header-nav">
                <li> <a href="index.html" style="color: #ccc;">小米商城</a> |&nbsp;</li>
                <li>MIUI |&nbsp;</li>
                <li>loT |&nbsp;</li>
                <li>云服务 |&nbsp;</li>
                <li>水滴 |&nbsp;</li>
                <li>金融 |&nbsp;</li>
                <li>有品 |&nbsp;</li>
                <li>Select Region</li>
            </ul>
            <!-- 右侧导航 -->
            <div class="header-right">
                <div id="welcomeBox">
                    欢迎您：<span id="usernameSpan"></span>
                    &nbsp;&nbsp;<input id="btnLogout" type="button" value="注销" />
                </div>
                <div id="loginBox">
                    <a href="login.html">&nbsp;&nbsp;登录</a>
                </div>
                <a href="reginset.html">&nbsp;&nbsp;注册 &nbsp;&nbsp;</a>
                <a href="#">消息通知&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <!-- 购物车显示区域 -->
                <p class="Cart">
                    <a href="./cart.html" style="color: black;"> <i class="iconfont icon-gouwuchekong
                    "></i>购物车</a>
                </p>
                <!-- 显示购物车 -->
                <div class="p-cart">
                    购物车中还没有商品赶紧买吧
                </div>
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->
    <!-- logo部分开始 -->
    <div id="logo">
        <div class="logo-con">
            <!-- 左侧logo -->
            <h1><img src="./images/phonepic/logo-mi2.png" alt=""></h1>
            <!-- logo导航 -->
            <ul class="logo-nav">
                <li>
                    全部商品分类
                </li>
                <li>小米手机
                    <ul class="logo-lastnav">
                        <li><img src="./images/detail/1.png" alt="">
                        </li>
                        <li><img src="./images/mix2320-220.png" alt=""></li>
                        <li><img src="./images/detail/2.png" alt=""></li>
                        <li><img src="./images/detail/3.png" alt=""></li>
                        <li><img src="./images/detail/4.png" alt=""></li>
                    </ul>
                </li>
                <li>红米
                    <ul class="logo-lastnav" style="left: -309px;">
                        <li><img src="./images/note2320x220.png" alt=""></li>
                        <li><img src="./images/note2320x220.png" alt=""></li>
                        <li><img src="./images/note2320x220.png" alt=""></li>
                        <li><img src="./images/note2320x220.png" alt=""></li>
                        <li><img src="./images/note2320x220.png" alt=""></li>
                    </ul>
                </li>
                <li>电视
                    <ul class="logo-lastnav" style="left: -367px;">
                        <li><img src="./images/tv2.png" alt=""></li>
                        <li><img src="./images/tv2.png" alt=""></li>
                        <li><img src="./images/tv2.png" alt=""></li>
                        <li><img src="./images/tv2.png" alt=""></li>
                        <li><img src="./images/tv2.png" alt=""></li>
                    </ul>
                </li>
                <li>笔记本
                    <ul class="logo-lastnav" style="left: -422px;">
                        <li><img src="./images/computer3.jpg" alt=""></li>
                        <li><img src="./images/computer3.jpg" alt=""></li>
                        <li><img src="./images/computer3.jpg" alt=""></li>
                        <li><img src="./images/computer3.jpg" alt=""></li>
                        <li><img src="./images/computer3.jpg" alt=""></li>
                    </ul>
                </li>
                <li>盒子
                    <ul class="logo-lastnav" style="left: -492px;">
                        <li><img src="./images/hezi2.png" alt=""></li>
                        <li><img src="./images/hezi2.png" alt=""></li>
                        <li><img src="./images/hezi2.png" alt=""></li>
                        <li><img src="./images/hezi2.png" alt=""></li>
                        <li><img src="./images/hezi2.png" alt=""></li>
                    </ul>
                </li>
                <li>新品
                    <ul class="logo-lastnav" style="left: -553px;">
                        <li><img src="./images/xinping2.png" alt=""></li>
                        <li><img src="./images/xinping2.png" alt=""></li>
                        <li><img src="./images/xinping2.png" alt=""></li>
                        <li><img src="./images/xinping2.png" alt=""></li>
                        <li><img src="./images/xinping2.png" alt=""></li>
                    </ul>
                </li>
                <li>路由器
                    <ul class="logo-lastnav" style="left: -603px;">
                        <li><img src="./images/router3.jpg" alt=""></li>
                        <li><img src="./images/router3.jpg" alt=""></li>
                        <li><img src="./images/router3.jpg" alt=""></li>
                        <li><img src="./images/router3.jpg" alt=""></li>
                        <li><img src="./images/router3.jpg" alt=""></li>
                    </ul>
                </li>
                <li>智能硬件服务</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
            <!-- 右侧搜索框 -->
            <div class="search">
                <input type="text">
                <button><i class="iconfont icon-fangdajing
                    "></i></button>
            </div>
        </div>
    </div>
    <!-- 售后 -->
    <div id="after">
        <div class="after-con">
            <p> <a href="index.html">首页</a> / 申请售后服务</p>
        </div>
    </div>
    <!-- 结束 -->
    <div id="over">
        <div class="over-con">
            <!-- 左侧导航 -->
            <div class="oversubnav">
                <ul class="orders">
                    <li class="first" style="margin-top: 53px;">订单中心</li>
                    <li>我的订单</li>
                    <li>评价订单</li>
                    <li>话费充值订单</li>
                    <li>以旧换新订单</li>
                    <li class="first">个人中心</li>
                    <li>我的个人中心</li>
                    <li>消息通知</li>
                    <li>现金账户</li>
                    <li>购买资格</li>
                    <li>小米礼品卡</li>
                    <li>现金劵</li>
                    <li>喜欢的商品</li>
                    <li>收货地址</li>
                    <li>红包</li>
                    <li class="first">售后服务</li>
                    <li>服务记录</li>
                    <li>申请服务</li>
                    <li>领取快递报销</li>
                    <li class="first">账户管理</li>
                    <li>个人信息</li>
                    <li>修改密码</li>
                </ul>
            </div>
            <!-- 右侧导航 -->
            <div class="overright">
                <div class="top">
                    <h1>选择申请方式</h1>
                    <ul class="top-p">
                        <li>
                            <a href="#">
                                <img src="./images/detail/111.png" alt="">
                            </a>
                            <span>快速申请</span>
                            <p>小米网/小米商城App购买的订单 <br>
                                支持通过订单快速申请
                            </p>
                            <h4> <a href="detail.html">前往订单</a></h4>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/detail/222.png" alt="">
                            </a>
                            <span>填写申请单</span>
                            <p>其他渠道购买的产品 <br>
                                根据产品唯—识别码和购买凭证申请售后

                            </p>
                            <h4> <a href="#">申请售后</a></h4>
                        </li>
                        <!-- <li></li> -->
                    </ul>
                </div>
            </div>
            <!-- 下提示 -->
            <div class="botnav">
                <a href="#">查看新手指导说明？点击<i style="color: orange;">申请售后说明</i> </a>
            </div>
        </div>
    </div>
    <!-- 结束 -->
    <div id=" footer">
        <div class="footer-con">
            <!-- footer头部 -->
            <ul class="footer-top">
                <li><i class="iconfont icon-weixiu"></i> 预约维修服务</li>
                <li><i class="iconfont icon-qitianwuliyoutuihuan"></i> 7天无理由退货</li>
                <li><i class="iconfont icon-15"></i> 15天免费退货</li>
                <li><i class="iconfont icon-liwu"></i> 源69包邮</li>
                <li><i class="iconfont icon-dizhiguanli"></i> 502家售后网店</li>
            </ul>
            <!-- 内容导航 -->
            <dl class="footer-nav">
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl class="footer-nav">
                <dt>服务支持</dt>
                <dd>售后服务</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl class="footer-nav">
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd>
            </dl>
            <dl class="footer-nav">
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd>
                <dd>企业社会责任关系</dd>
                <dd>廉洁举报</dd>
            </dl>
            <dl class="footer-nav">
                <dt>关注我们</dt>
                <dd>新浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd>
                <dd>公益基金会</dd>
            </dl>
            <dl class="footer-nav">
                <dt>特色服务</dt>
                <dd>F码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>
            <div class="footer-right">
                <img src="./images/kf_03.png" alt="">
            </div>
        </div>
    </div>
    <!-- 公示-->
    <div id="item">
        <div class="item-con">
            <h1><img src="./images/logo.jpg" alt=""></h1>
            <a href="#">小米商城 |</a>
            <a href="#">MIUI |</a>
            <a href="#">米家 |</a>
            <a href="#">米聊 |</a>
            <a href="#">多看 |</a>
            <a href="#">游戏 |</a>
            <a href="#">政企服务 |</a>
            <a href="#">小米天猫店 |</a>
            <a href="#">小米集团隐私政策 |</a>
            <a href="#">小米公司儿童信息保护规则 |</a>
            <a href="#">小米商城隐私政策 |</a>
            <a href="#">小米商城用户协议 |</a>
            <a href="#">问题反馈 |</a> <br>
            <a href="#">北京互联网发原法律服务工作站 |</a>
            <a href="#">中国消费者协会</a>
            <a href="#">北京市消费者协会</a>
            <p>mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2020]0276-042号
                (京)网械平台备字(2018）第00005号互联网药品信息服务资格证(京)-非经营性-2014-0090营业执照医疗器械质量公告增值电信业务许可证网络食品经营备案京食药网食备202010048食品经营许可证
                违法和不良信息举报电话:171-5104-4404-知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
            <div class="item-footer">
                <img src="./images/end_03.png" alt="">
            </div>
            <!-- 侧边导航 -->
            <div class="r-nav">
                <ul class="nav-end">
                    <li>
                        <a href="#"><img src="./images/phonepic/o1.png" alt=""></a>
                        <p>手机APP</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o2.png" alt=""></a>
                        <p>个人中心</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o3.png" alt=""></a>
                        <p>售后服务</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                        <p>人工客服</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                        <p>购物车</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/font.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/cookieTools.js"></script>
<script>
    // 头部右侧导航显示购物车
    let oCart = document.querySelector('.Cart');
    let oPcart = document.querySelector('.p-cart');
    oCart.onmouseover = function () {
        oCart.style.backgroundColor = 'white';
        oPcart.style.display = 'block';
    }
    oCart.onmouseout = function () {
        oCart.style.backgroundColor = '';
        oPcart.style.display = 'none';
    }
    // cookie

    function initUI() {
        let username = getCookie("username");
        if (username) {
            $("#usernameSpan").html(username);
            $("#welcomeBox").css({
                "display": "block"
            });
            $("#loginBox").css({
                "display": "none"
            });
        } else {
            $("#loginBox").css({
                "display": "block"
            });
            $("#welcomeBox").css({
                "display": "none"
            });
        }
    }

    $(function () {
        initUI();
        $("#btnLogout").click(function () {
            removeCookie("username");
            initUI();
        });
    });
</script>